<!-- 空闲课时 Modal -->
<div class="modal fade" id="freeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-clock-history me-2"></i>空闲课时查询</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <!-- 查询条件 -->
        <div id="free-panel" class="mb-3">
          <div class="row g-2 align-items-center">
            <div class="col-auto">
              <label>开始日期</label>
              <input type="date" id="free-start-date" class="form-control form-control-sm" required>
            </div>
            <div class="col-auto">
              <label>结束日期</label>
              <input type="date" id="free-end-date" class="form-control form-control-sm" required>
            </div>
            <div class="col-auto align-self-end">
              <button id="free-search" class="btn btn-primary btn-sm">查询</button>
            </div>
          </div>
        </div>
        <!-- 结果列表 -->
        <div id="free-results" style="max-height:300px; overflow-y:auto;">
          <table class="table table-sm text-center mb-0">
            <thead>
              <tr>
                <th>日期</th>
                <th>空闲时段</th>
              </tr>
            </thead>
            <tbody id="free-body"></tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary btn-sm" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
